<template>
  <div class="mt-32px mb-10px w-full flex justify-center">
    <button
      class="w-160px h-32px rounded-16px border border-#E1E1E1 text-14px text-#6B39FF"
      @click="handleClick"
      v-if="!isLoaded && !loading"
    >
      加载更多
    </button>
    <button
      class="w-160px h-32px rounded-16px border border-#E1E1E1 text-14px text-#6B39FF"
      v-if="isLoaded"
    >
      没有更多了
    </button>
    <button
      class="w-160px h-32px rounded-16px border border-#E1E1E1 text-14px text-#6B39FF"
      v-if="loading"
    >
      正在加载...
    </button>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useDebounceFn } from '@vueuse/core'

const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  pageInfo: {
    type: Object,
    default: () => ({
      page: 1,
      pageSize: 10
    })
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const pageInfo = computed(() => props.pageInfo)
const isLoaded = computed(() => pageInfo.value.page * pageInfo.value.pageSize >= props.total)
const emits = defineEmits(['loadMore'])
const handleClick = useDebounceFn(() => {
  emits('loadMore', pageInfo)
}, 120)
</script>
<style lang="less" scoped></style>
